<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康饮食 - 饮食记录历史</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 防止内容溢出 */
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        /* 确保容器不溢出 */
        .container {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }
        /* 长文本自动换行 */
        p, span, div {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        /* 日历单元格样式 */
        .calendar-cell {
            position: relative;
            width: calc(100% / 7);
            padding-top: calc(100% / 7);
        }
        .calendar-cell-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800 pb-16">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex items-center">
            <a href="user.html" class="mr-3">
                <i class="fas fa-arrow-left text-gray-600"></i>
            </a>
            <h1 class="text-xl font-bold text-green-600">饮食记录历史</h1>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 日期筛选和视图切换 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex justify-between items-center mb-4">
                <div class="relative">
                    <select class="appearance-none bg-gray-100 rounded-full py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-green-500">
                        <option>最近7天</option>
                        <option>最近30天</option>
                        <option>本月</option>
                        <option>上月</option>
                        <option>自定义</option>
                    </select>
                    <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none"></i>
                </div>
                <div class="flex items-center text-sm">
                    <span class="text-gray-500">2023/05/10 - 2023/05/16</span>
                    <i class="fas fa-calendar-alt text-green-600 ml-2"></i>
                </div>
            </div>
            
            <!-- 视图切换 -->
            <div class="flex border border-gray-200 rounded-lg">
                <button class="flex-1 py-2 bg-green-600 text-white rounded-l-lg">
                    <i class="fas fa-list mr-1"></i>
                    列表视图
                </button>
                <button class="flex-1 py-2 text-gray-600">
                    <i class="fas fa-calendar-alt mr-1"></i>
                    日历视图
                </button>
            </div>
        </div>
        
        <!-- 列表视图内容 -->
        <div class="space-y-4 mb-6">
            <!-- 日期分组标题 -->
            <div class="flex items-center">
                <div class="bg-green-100 text-green-800 font-medium px-3 py-1 rounded-full">
                    2023年5月16日 (今天)
                </div>
                <div class="border-t border-gray-200 flex-grow ml-3"></div>
            </div>
            
            <!-- 早餐 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-coffee text-yellow-600"></i>
                        </div>
                        <span class="font-medium">早餐</span>
                    </div>
                    <span class="text-sm text-gray-500">08:30</span>
                </div>
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-sm text-gray-600">全麦面包，鸡蛋，牛奶</p>
                        <p class="text-xs text-gray-500 mt-1">450 千卡</p>
                    </div>
                    <a href="record-add.html" class="text-green-600">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            
            <!-- 午餐 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <div class="bg-orange-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-utensils text-orange-600"></i>
                        </div>
                        <span class="font-medium">午餐</span>
                    </div>
                    <span class="text-sm text-gray-500">12:15</span>
                </div>
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-sm text-gray-600">米饭，清蒸鱼，西兰花，番茄豆腐汤</p>
                        <p class="text-xs text-gray-500 mt-1">560 千卡</p>
                    </div>
                    <a href="record-add.html" class="text-green-600">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            
            <!-- 日期分组标题 -->
            <div class="flex items-center mt-6">
                <div class="bg-gray-100 text-gray-700 font-medium px-3 py-1 rounded-full">
                    2023年5月15日 (昨天)
                </div>
                <div class="border-t border-gray-200 flex-grow ml-3"></div>
            </div>
            
            <!-- 早餐 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <div class="bg-yellow-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-coffee text-yellow-600"></i>
                        </div>
                        <span class="font-medium">早餐</span>
                    </div>
                    <span class="text-sm text-gray-500">07:45</span>
                </div>
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-sm text-gray-600">燕麦粥，香蕉，酸奶</p>
                        <p class="text-xs text-gray-500 mt-1">380 千卡</p>
                    </div>
                    <a href="record-add.html" class="text-green-600">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            
            <!-- 午餐 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <div class="bg-orange-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-utensils text-orange-600"></i>
                        </div>
                        <span class="font-medium">午餐</span>
                    </div>
                    <span class="text-sm text-gray-500">12:30</span>
                </div>
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-sm text-gray-600">三明治，沙拉，橙汁</p>
                        <p class="text-xs text-gray-500 mt-1">490 千卡</p>
                    </div>
                    <a href="record-add.html" class="text-green-600">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            
            <!-- 晚餐 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
                <div class="flex justify-between items-center mb-3">
                    <div class="flex items-center">
                        <div class="bg-blue-100 p-2 rounded-lg mr-3">
                            <i class="fas fa-moon text-blue-600"></i>
                        </div>
                        <span class="font-medium">晚餐</span>
                    </div>
                    <span class="text-sm text-gray-500">18:20</span>
                </div>
                <div class="flex items-center">
                    <div class="flex-1">
                        <p class="text-sm text-gray-600">意大利面，鸡胸肉，蔬菜汤</p>
                        <p class="text-xs text-gray-500 mt-1">620 千卡</p>
                    </div>
                    <a href="record-add.html" class="text-green-600">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 日历视图（隐藏状态） -->
        <div class="hidden">
            <!-- 月份导航 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                <div class="flex justify-between items-center">
                    <button class="p-2 text-gray-600">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <h2 class="text-lg font-medium">2023年5月</h2>
                    <button class="p-2 text-gray-600">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
            
            <!-- 日历网格 -->
            <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                <!-- 星期标题 -->
                <div class="grid grid-cols-7 mb-2">
                    <div class="text-center text-gray-500 text-sm">日</div>
                    <div class="text-center text-gray-500 text-sm">一</div>
                    <div class="text-center text-gray-500 text-sm">二</div>
                    <div class="text-center text-gray-500 text-sm">三</div>
                    <div class="text-center text-gray-500 text-sm">四</div>
                    <div class="text-center text-gray-500 text-sm">五</div>
                    <div class="text-center text-gray-500 text-sm">六</div>
                </div>
                
                <!-- 日历单元格 -->
                <div class="flex flex-wrap">
                    <!-- 上月日期（灰色） -->
                    <div class="calendar-cell">
                        <div class="calendar-cell-content text-gray-300">30</div>
                    </div>
                    <!-- 5月日期 -->
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">1</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">2</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">3</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">4</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">5</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">6</div>
                    </div>
                    
                    <!-- 第二行 -->
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">7</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">8</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">9</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">10</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">11</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">12</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">13</div>
                    </div>
                    
                    <!-- 第三行 -->
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">14</div>
                    </div>
                    <div class="calendar-cell bg-green-50 rounded-lg">
                        <div class="calendar-cell-content">
                            <span>15</span>
                            <div class="w-6 h-1 bg-green-500 rounded-full mt-1"></div>
                        </div>
                    </div>
                    <div class="calendar-cell bg-green-100 rounded-lg">
                        <div class="calendar-cell-content text-green-800 font-medium">
                            <span>16</span>
                            <div class="w-6 h-1 bg-green-500 rounded-full mt-1"></div>
                        </div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">17</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">18</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">19</div>
                    </div>
                    <div class="calendar-cell">
                        <div class="calendar-cell-content">20</div>
                    </div>
                    
                    <!-- 剩余日期 -->
                    <!-- ... 后续日期 ... -->
                </div>
            </div>
            
            <!-- 当日记录摘要 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
                <h3 class="font-medium mb-3">2023年5月16日 饮食记录</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
                        <div class="flex items-center">
                            <div class="bg-yellow-100 p-1 rounded mr-2">
                                <i class="fas fa-coffee text-yellow-600 text-xs"></i>
                            </div>
                            <span class="text-sm">早餐 - 08:30</span>
                        </div>
                        <span class="text-sm">450 千卡</span>
                    </div>
                    <div class="flex justify-between items-center p-2 bg-gray-50 rounded">
                        <div class="flex items-center">
                            <div class="bg-orange-100 p-1 rounded mr-2">
                                <i class="fas fa-utensils text-orange-600 text-xs"></i>
                            </div>
                            <span class="text-sm">午餐 - 12:15</span>
                        </div>
                        <span class="text-sm">560 千卡</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="w-full py-3 text-green-600 border border-green-600 rounded-lg">
            加载更多记录
        </button>
    </main>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around items-center py-2">
            <a href="index.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="food-search.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-search text-xl"></i>
                <span class="text-xs mt-1">搜索</span>
            </a>
            <a href="analysis.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-chart-pie text-xl"></i>
                <span class="text-xs mt-1">分析</span>
            </a>
            <a href="user.html" class="flex flex-col items-center p-2 text-green-600">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </footer>
</body>
</html> 